<template>
	<view
		style="background: #fff; border-radius: 12px; width: 95%; margin: auto; box-sizing: border-box; padding: 10px; margin-top: 10px;">
		<!-- 		<template>
		    <view class="">
		        <uni-forms :modelValue="formData">
		            <uni-forms-item label="姓名" name="name">
		                <u--input
		                		v-model="formData.name"
		                		border="none"
		                ></u--input>
		            </uni-forms-item>
		            <uni-forms-item name="hobby" label="身份证号">
		                <u--input
		                		v-model="formData.phone"
		                		border="none"
		                ></u--input>
		            </uni-forms-item>
					<uni-forms-item name="hobby" label="手机号">
					    <u--input
					    		v-model="formData.phone"
					    		border="none"
					    ></u--input>
					</uni-forms-item>
					<uni-forms-item label-position="top" name="hobby" >
						<view style="width: 100%; display: block;">
							上传身份证正反面
						</view>
					    <view style="width: 100%;">
					    	<u-row customStyle="margin-bottom: 10px">
					    		<u-col span="6">
					    			<view style="text-align: center;" class="demo-layout bg-purple-light">							  <view style="width:140px ; margin: auto;background: #f0f0f0;">
					    					<image style="width:140px; height: 94px; margin: auto;" src="../../static/sfzzm.png" mode=""></image>
					    					<view>
					    						上传正面
					    					</view>
					    				</view>	
					    				
					    			</view>
					    		</u-col>
					    		<u-col span="6">
					    			<view  style="text-align: center;" class="demo-layout bg-purple-light">
					    				<view style="width:140px ; margin: auto; background: #f0f0f0;">
					    						<image style="width:140px; height: 94px;" src="../../static/sfzbm.png" mode=""></image>
					    						<view>
					    							上传背面
					    						</view>
					    					</view>
					    				
					    			</view>
					    		</u-col>
					    	</u-row>					
					    </view>
					</uni-forms-item>
		        </uni-forms>
		        
		    </view>
		</template> -->



		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u-form labelPosition="left" :model="model1" :rules="rules" labelWidth='180rpx' ref="form1">
			<u-form-item label="姓名：" prop="userInfo.realName" borderBottom ref="item1">
				<u-input v-model="model1.userInfo.realName" :border="false"></u-input>
			</u-form-item>
			<u-form-item label="身份证号：" prop="userInfo.cardNo" borderBottom ref="item1">
				<u-input v-model="model1.userInfo.cardNo" :border="false"></u-input>
			</u-form-item>

			<!-- <u-form-item
					label="手机号："
					prop="userInfo.phone"
					borderBottom
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.phone"
						border="none"
				></u--input>
			</u-form-item> -->
			<u-form-item>
				<view style="width: 100%; display: block;">
					上传身份证正反面
				</view>
			</u-form-item>
			<u-form-item>
				<view style="width: 100%;">
					<u-row customStyle="margin-bottom: 10px">
						<u-col span="6">
							<view style="text-align: center;" class="demo-layout bg-purple-light">
								<view @click="up_cart('z')"  style="width:140px ; margin: auto;background: #f0f0f0;text-align: center;">
									<view v-if="model1.userInfo.cardNoImg1"
										style="width:140px; height: 94px; margin: auto; overflow: hidden;">
										<image style="width: 100%;" mode="widthFix" :src="model1.userInfo.cardNoImg1">
										</image>
									</view>
									<image v-else style="width:140px; height: 94px; margin: auto;"
										src="../../static/sfzzm.png" mode=""></image>
									<view>
										上传正面
									</view>
								</view>

							</view>
						</u-col>
						<u-col span="6">
							<view style="text-align: center;" class="demo-layout bg-purple-light">
								<view @click="up_cart('f')" style="width:140px ; margin: auto; background: #f0f0f0;">
									<view v-if="model1.userInfo.cardNoImg2"
										style="width:140px; height: 94px; margin: auto; overflow: hidden;">
										<image style="width: 100%;" mode="widthFix" :src="model1.userInfo.cardNoImg2">
										</image>
									</view>
									<image v-else style="width:140px; height: 94px;" src="../../static/sfzbm.png"
										mode=""></image>
									<view>
										上传背面
									</view>
								</view>

							</view>
						</u-col>
					</u-row>
				</view>
			</u-form-item>


			<u-form-item style="margin-top: 60px;">
				<button @click="submit"
					style="background: #FA9700; color: #fff; width: 90%; border-radius: 30px;line-height: 46px;"
					type="default">{{imageStatus==0?'审核中':imageStatus==1?'审核通过':imageStatus==2?'审核驳回':'保存'}}</button>
			</u-form-item>

		</u-form>

	</view>
</template>

<script>
	// import {mallName} from '../../components/request.js';
	import {
		baseURL
	} from '../../common/config/config.js';
	import {shiMin,shenShiMin} from "@/common/config/request.js"
	// mallName
	export default {
		data() {
			return {
				showSex: false,
				formData: {},
				model1: {
					userInfo: {
						realName: '',
						cardNo: '',
						cardNoImg1: '',
						cardNoImg2: ''
					},
				},
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false,
				// dom_width:'',
				img_width: '',
				img_height: '',
				types: null,
				imageStatus:null,//
			};
		},
		mounted() {
			// this.getimg()
			// this.getDescBox()
		},
		onLoad() {
			this.getShiMin()//获取实名认证
		},
		methods: {
			getShiMin(){
				shenShiMin().then((res)=>{
					console.log(res,'实名认证')
					if(res.data.code==1){
						this.model1.userInfo.realName=res.data.data.name
						this.model1.userInfo.cardNo=res.data.data.id_card
						this.model1.userInfo.cardNoImg1=res.data.data.front_image
						this.model1.userInfo.cardNoImg2=res.data.data.verso_image
						this.imageStatus=res.data.data.status
					}
				})
			},
			mallName(data) {
				mallName(data).then((e) => {
					if (e.data.code == 200) {
						return uni.showToast({
							title: e.data.msg,
							icon: 'none',
							duration: 1000,
							mask: true
						})
					}
				})
			},
			submit() {
				// model1: {
				// 	userInfo: {
				// 		realName:'',
				// 		cardNo:'',
				// 		cardNoImg1:'',
				// 		cardNoImg2:''
				// 	},
				// }
				if (this.model1.userInfo.realName == '') {
					return uni.showToast({
						title: '请输入名字',
						icon: 'none',
						duration: 1000,
						mask: true
					})
				}
				if (this.model1.userInfo.cardNo == '') {
					return uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						duration: 1000,
						mask: true
					})
				}
				var p = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				if(!p.test(this.model1.userInfo.cardNo)){
					return uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none',
						duration: 1000,
						mask: true
					})
				}
				// return false
				console.log(this.model1.userInfo)
				console.log(this.imageStatus)
				if(this.imageStatus!=0&&this.imageStatus!=1){
					let data={
						name:this.model1.userInfo.realName,
						id_card:this.model1.userInfo.cardNo,
						front_image:this.model1.userInfo.cardNoImg1,
						verso_image:this.model1.userInfo.cardNoImg2,
					}
					shiMin(data).then((res)=>{
						if(res.data.code==1){
							uni.showToast({ title: '提交成功', icon: 'none' });
							setTimeout(()=>{
								uni.navigateBack({
									
								})
							},1500)
						}
					})
				}
				// this.mallName(this.model1.userInfo)
			},
			up_cart(e) {
				console.log(e)
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: baseURL + '/api/Upload/index',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
							},
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								if (e == 'z') {
									this.model1.userInfo.cardNoImg1 = JSON.parse(uploadFileRes
										.data).data
								} else {
									this.model1.userInfo.cardNoImg2 = JSON.parse(uploadFileRes
										.data).data
								}
								console.log(JSON.parse(uploadFileRes.data).data);
							}
						});
					}
				});
			},


			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			// 获取图片原始宽高
			// getimg(){
			// 	this.getDescBox().then((data)=>{
			// 		console.log(data,'domkuaandu')
			// 		var that=this
			// 		uni.getImageInfo({
			// 			src:'../../static/sfzbm.png',
			// 			success:function(e){
			// 				// 根据dom宽度计算 图片宽高比例
			// 				console.log(e)
			// 				let ratio=data/e.width
			// 				console.log(ratio)
			// 				that.img_width=e.width*ratio+'px'
			// 				that.img_height=e.height*ratio+'px'
			// 			}
			// 		})
			// 	})

			// },
			// // 获取节点元素宽度
			// getDescBox() { 
			// return new Promise((resolve, reject) => {
			// 	uni.createSelectorQuery().in(this).select('.demo-layout').boundingClientRect(result => {
			// 	   if (result) { 
			// 	     // console.log('==========',result) 
			// 		 // this.dom_width=result.width
			// 		 resolve(result.width)
			// 	   }else { 
			// 	     this.getDescBox(); 
			// 	 } 
			// 	  }).exec(); 
			// 	  })
			// 	},

		},
	};
</script>
